<template>
	<view>
		<!-- 	<view class="item flex align-items ">
			<view class="item_lefts" style="width: 240rpx;">风险控制措施</view>
			<view class="item_right  flex align-items" @click="show = true">
				<u-input placeholder="请选择" v-model="name" :fontSize="16" :readonly="true"
					placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
				<u-icon name="arrow-right" color="#CCCCCC" :size="16"></u-icon>
			</view>
		</view> -->
		<view class="box " v-for="(v,i) in list" :key="i">
			<view class="item flex align-items ">
				<view class="item_left">风险辨识</view>
				<view class="item_right">
					<u-input placeholder="请输入" v-model="v.identification" :fontSize="16"
						placeholderClass="placeholderClass"></u-input>
				</view>
			</view>
			<view class="item flex align-items ">
				<view class="item_left">风险管控措施</view>
			</view>
			<view class=" margin-top10 " style="border-bottom: 1rpx solid #E6E6E6;">
				<u-textarea v-model="v.measure" placeholder="请输入" :fontSize="16" placeholderClass="placeholderClass"
					style="font-size: 16px;"> </u-textarea>
			</view>
			<view class="item flex align-items  justify-content-between">
				<view class="item_left">操作</view>
				<view class="item_right flex  justify-content-right">
					<!-- 	<u-input  :readonly="true" @change="(e)=>inputChange(e,i)" :fontSize="16"
						placeholderClass="placeholderClass" type="number"></u-input> -->
					<u-icon name="trash" color="#fe0000" :size="20" style="iconlist" @click="dele(i)"></u-icon>
					<u-icon name="arrow-upward" color="#2979ff" :size="20" style="margin-left: 15rpx;"
						@click="moveUp(i)" v-if="i>0"></u-icon>
					<u-icon name="arrow-downward" color="#2979ff" :size="20" style="margin-left: 15rpx;"
						@click="moveDown(i)" v-if="i != list.length -1"></u-icon>
				</view>
			</view>
			<!-- 	<view class="item flex align-items ">
				<view class="item_left">拍照</view>
				<view class="item_right flex align-items">
					<view class="item_is flex align-items" @click="v.ifPhotograph=1">
						<image class="item_img" v-if="v.ifPhotograph==1" src="/static/img/index/xuanzhong.png" mode="">
						</image>
						<view class="item_yuan" v-else></view>
						<view>是</view>
					</view>
					<view class="item_is  flex align-items margin-left30" @click="v.ifPhotograph=0">
						<image class="item_img" v-if="v.ifPhotograph==0" src="/static/img/index/xuanzhong.png" mode="">
						</image>
						<view class="item_yuan" v-else></view>
						<view>否</view>
					</view>
				</view>
			</view> -->
			<!-- <view class="item flex align-items  justify-content-right" @click="dele(i)">
				
			</view> -->

		</view>
		<view class="btn" @click="add">+添加</view>
		<view class="bottom flex align-items">
			<!-- <view class="bottom_left" @click="generateAdd">生成模板</view> -->
			<view class="bottom_right" @click="submit()">保存</view>
		</view>
		<!-- 弹出层 -->
		<u-popup :show="show" mode="center" :round="10">
			<view class="block">
				<view class="block_title">选择模板</view>
				<view class="block_herder flex align-items ">
					<view class="block_herder_left">模板名称</view>
					<u-input placeholder="请选择" v-model="name" :fontSize="14"
						placeholderClass="placeholderClass1"></u-input>
					<view class="block_herder_right" @click="getRiskList()">查询</view>
				</view>
				<view class="template">
					<view class="template_herder flex align-items ">
						<view class="template_left">选择</view>
						<view class="template_right">模板名称</view>
					</view>
					<view class="template_herder flex align-items " v-for="(v,i) in riskMeasuresList" :key="i"
						@click="riskMeasuresId =v.id">
						<view class="template_left">
							<image v-if="riskMeasuresId ==v.id" class="template_img"
								src="/static/img/index/xuanzhong.png" mode=""></image>
							<view v-else class="template_yuan"></view>
						</view>
						<view class="template_right">{{v.name}}</view>
					</view>
					<!-- <view class="template_herder flex align-items ">
						<view class="template_left">
							<view class="template_yuan"></view>
						</view>
						<view class="template_right">模板名称</view>
					</view>
					<view class="template_herder flex align-items ">
						<view class="template_left">
							<image class="template_img" src="/static/img/index/xuanzhong.png" mode=""></image>
						</view>
						<view class="template_right">模板名称</view>
					</view> -->
				</view>
				<view class="block_btn flex align-items justify-content-between">
					<view class="block_btn_left" @click="comit(1)">取消</view>
					<view class="block_btn_right" @click="comit()">确认</view>
				</view>
			</view>
		</u-popup>

		<!-- 生成模板 -->
		<u-popup :show="generateShow" mode="center" :round="10">
			<view class="blockGener">
				<view class="blockGener_title">生成模板</view>
				<view class="blockGener_item flex align-items ">
					<view class="blockGener_item_left txt">模板名称:</view>
					<view class="blockGener_item_right">
						<u-input v-model="generateForm.name" placeholder="请输入" :fontSize="16"
							placeholderClass="placeholderClass"></u-input>
					</view>
				</view>
				<view class="blockGener_item flex align-items ">
					<view class="blockGener_item_left">适用设备类型:</view>
					<view class="blockGener_item_right" @click="treeClick()">
						<u-input v-model="generateForm.label" placeholder="请输入" :fontSize="16" :readonly="true"
							placeholderClass="placeholderClass" style="pointer-events:none"></u-input>
					</view>
				</view>
				<view class="block_btn flex align-items justify-content-between">
					<view class="block_btn_left" @click="generateShow =false">取消</view>
					<view class="block_btn_right" @click="generateComit()">确认</view>
				</view>
			</view>
		</u-popup>
		<!-- <tree ref="tree" @comit="treeComit" :treeData="treeData"></tree> -->
	</view>
</template>

<script>
	import {
		riskAdd,
		riskList
	} from '@/api/risks.js'
	import {
		deviceInfoList,
		deviceTypeInfoList
	} from '@/api/lssue.js'
	export default {
		data() {
			return {
				show: false,
				list: [],
				form: {
					identification: '',
					measure: '',
					sort: '',
					ifPhotograph: ''
				},
				riskMeasuresList: [],
				riskMeasuresId: '',
				name: '',
				generateShow: false,
				treeData: [],
				generateForm: {
					name: '',
					deviceTypeId: '',
					label: ''
				},
				name: '',
				currentIndex: 0 // 当前索引
			};
		},
		onLoad() {
			this.getRiskList()
			this.getinit()
			if (getApp().globalData.listRisk.length > 0) {
				this.list = getApp().globalData.listRisk
			}
		},
		methods: {
			// 上移当前索引
			moveUp(idx) {
				console.log(idx);
				this.swapItems(idx, idx - 1)
			},
			// 下移当前索引
			moveDown(idx) {
				console.log(idx);
				this.swapItems(idx, idx + 1)
			},
			// 交换数组元素位置
			swapItems(index1, index2) {
				if (index1 >= 0 && index1 < this.list.length && index2 >= 0 && index2 < this.list.length) {
					const temp = this.list[index1];
					this.$set(this.list, index1, this.list[index2]);
					this.$set(this.list, index2, temp);
				} else {
					console.error('索引超出数组范围');
				}
			},
			generateAdd() {
				if (this.list.length <= 0) {
					return uni.$u.toast('请先填写风险控制措施');
				}
			
				const isFilled = this.list.every(item => item.identification && item.measure && item.sort && item
					.ifPhotograph + '');
				const arr = this.list.map(v => v.sort);
				const ifCheck = this.checkDuplicates(arr);
				if (!isFilled) {
					uni.$u.toast('存在未填写完整的值');
					return;
				}
				if (!ifCheck) {
					uni.$u.toast('当前排序值有重复');
					return;
				}
				this.generateForm = {
					name: '',
					deviceTypeId: '',
					label: ''
				};
				this.generateShow = true;

			},
			// 判断排序值
			inputChange(e, idx) {
				// console.log(this.list, e, "list");
				// if (e == '') return
				// const arr = this.list.filter(v => v.sort == e)
				// console.log(arr, "list");
				// if (arr.length > 0) {
				// 	// this.list[idx].sort = ''
				// 	uni.$u.toast('当前排序值已有')
				// }
			},

			generateComit() {
				uni.showLoading({
					title: "加载中"
				})
				riskAdd({
					...this.generateForm,
					list: this.list
				}).then(res => {
					console.log(res, "res");
					uni.hideLoading()
					this.getRiskList()
					this.generateShow = false
				})
			},
			treeClick() {
				this.$refs.tree.itemclick(false, false)
			},
			treeComit(e) {
				console.log(e, 'e')
				this.generateForm.deviceTypeId = e[0].id
				this.generateForm.label = e[0].label
			},
			async getinit() {
				const res = await deviceTypeInfoList()
				console.log(res, "res");
				// this.treeData = res.datas.map(v => {
				// 	return {
				// 		label: v.deviceTypeName,
				// 		id: v.deviceId,
				// 		checked: false,

				// 	}
				// })
				this.treeData = res.datas.map(ele => this.treeStructure1(ele));
			},
			treeStructure1(ele) {
				const haveChildren = Array.isArray(ele.nodes) && ele.nodes.length > 0;
				return {
					label: ele.text,
					id: ele.id,
					checked: false,
					children: haveChildren ? ele.nodes.map(i => this.treeStructure1(i)) : [],
				}
			},
			async submit() {
				// if (this.list.length <= 0) {
				// 	return uni.$u.toast('请先填写风险控制措施');
				// }
				console.log(this.list, "this.list")
			
				const isFilled = this.list.every(item => {
					return item.identification && item.measure  && item.ifPhotograph + '';
				});
				// const arr = this.list.map(v => v.sort)
				// const ifCheck = this.checkDuplicates(arr)
				if (!isFilled) {
					uni.$u.toast('存在未填写完整的值');
					return;
				}
				// if (!ifCheck) {
				// 	uni.$u.toast('当前排序值有重复');
				// 	return;
				// }
				this.list.forEach((v, i) => {
					v.sort = i + 1
				})
				uni.$emit("risk", this.list)
				uni.navigateBack()

			},
			// 判断是否有重复的
			checkDuplicates(arr) {
				let set = new Set();
				for (let num of arr) {
					if (set.has(num)) {
						return false; // 数组中有重复的数字，返回false
					}
					set.add(num);
				}
				return true; // 数组中没有重复的数字，返回true
			},

			add() {
				this.list.push({
					identification: '',
					measure: '',
					sort: '',
					ifPhotograph: 0
				})
			},

			dele(idx) {
				uni.showModal({
					title: '提示',
					content: "是否删除当前数据？",
					success: (res) => {
						console.log(res);
						if (res.confirm) {
							this.list.splice(idx, 1)
						}
					},

				})
			},
			comit(type) {
				if (type) {
					this.riskMeasuresId = '';
				} else {
					if (this.riskMeasuresId == '') {
						uni.$u.toast('请先选择模板');
						return;
					}
					const selectedTemplate = this.riskMeasuresList.find(v => v.id == this.riskMeasuresId);
					if (selectedTemplate) {
						this.list = [...selectedTemplate.list];
						this.name = selectedTemplate.name
					}
				}
				this.show = false;
			},
			async getRiskList() {
				const res = await riskList({
					PAGE_NO: 1,
					PAGE_SIZE: 10000,
					name: this.name
				})
				this.riskMeasuresList = res.rows
				console.log(res, "res");
			}
		}
	}
</script>
<style>
	page {
		background-color: #F6F6F6;
		padding-bottom: 140rpx;
	}
</style>
<style lang="scss" scoped>
	.item {
		height: 80rpx;
		border-bottom: 1rpx solid #E6E6E6;
		padding: 0 31rpx;
		background-color: #FFF;

		&_left {
			width: 215rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 33rpx;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			color: #666666;
		}

		&_lefts {
			width: 196rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 33rpx;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			color: #666666;
		}

		&_left::before {
			content: '*';
			color: #FF0000;
		}

		&_right {
			flex: 1;
		}

		&_fu {
			width: 196rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 33rpx;
			line-height: 47rpx;
			text-align: left;
			font-style: normal;
			color: #666666;
		}

		&_upload {
			width: 307rpx;
			height: 98rpx;
			background: #267DFF;
			text-align: center;
			line-height: 98rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #FFFFFF;
		}

		&_yuan {
			width: 31rpx;
			height: 31rpx;
			border: 2rpx solid #E6E6E6;
			border-radius: 50%;
			margin-right: 10rpx;
		}

		&_img {
			width: 31rpx;
			height: 31rpx;
			margin-right: 10rpx;
		}

	}

	.box {
		margin-top: 28rpx;
		background-color: #FFF;
		position: relative;
	}

	/deep/.placeholderClass {
		font-weight: 400;
		font-size: 24upx;
		color: #CCCCCC;
	}

	/deep/.uni-textarea-textarea {
		font-size: 32rpx;
	}

	/deep/.placeholderClass1 {
		font-size: 28rpx;
		color: #CCCCCC;
	}

	.btn {
		width: 685rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 0 auto;
		margin-top: 28rpx;
		color: #FFF;
		background-color: #267DFF;

		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 33rpx;
		color: #FFFFFF;
		font-style: normal;
		border-radius: 12rpx;
	}

	.bottom {
		padding-bottom: 20rpx;
		background-color: #FFF;
		padding-top: 10rpx;
		position: fixed;
		bottom: 0;
		width: 100%;

		view {
			width: 100%;
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
			font-weight: 500;
			font-size: 33rpx;
		}

		&_left {
			border: 1rpx solid #E6E6E6;
		}

		&_right {
			background-color: #267DFF;
			color: #FFF;
			font-weight: 500;
			font-size: 33rpx;
			border: 1rpx solid #267DFF;
		}

	}

	.block {
		width: 634rpx;

		&_title {
			padding-top: 67rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 36rpx;
			color: #000000;
			text-align: center;
			font-style: normal;
		}

		&_herder {
			width: 543rpx;
			height: 105rpx;
			background: #FFFFFF;
			margin: 0 auto;
			margin-top: 28rpx;
			padding: 0 0 19rpx 0;
			border-bottom: 1rpx solid #E6E6E6;

			&_left {
				font-weight: 400;
				font-size: 29rpx;
				color: #666666;
				font-style: normal;
			}

			&_right {
				width: 139rpx;
				height: 58rpx;
				background: #267DFF;
				border-radius: 13rpx;
				text-align: center;

				font-weight: 400;
				font-size: 29rpx;
				color: #FFFFFF;
				line-height: 58rpx;
			}
		}

		&_btn {
			margin-top: 26rpx;
			border-top: 1rpx solid #E0E0E0;
			height: 88rpx;

			&_left {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #000000;
				text-align: center;
				border-right: 1rpx solid #e0e0e0;
				flex: 1;
				height: 85rpx;
				line-height: 85rpx;

			}

			&_right {
				flex: 1;
				height: 85rpx;
				line-height: 85rpx;
				text-align: center;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 33rpx;
				color: #3388FF;
			}
		}
	}

	.template {
		width: 543rpx;
		background: #F5F5F5;
		border-radius: 22rpx;
		margin: 0 auto;
		margin-top: 18rpx;
		max-height: 300rpx;
		overflow-y: scroll;

		&_herder {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 29rpx;
			color: #999999;
			padding-top: 29rpx;
			padding-left: 30rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #E6E6E6;
		}

		&_herder:last-child {
			border-bottom: none;
		}

		&_left {
			width: 150rpx;
		}

		&_right {
			flex: 1;
			text-align: center;
		}

		&_yuan {
			width: 31rpx;
			height: 31rpx;
			border: 2rpx solid #E6E6E6;
			border-radius: 50%;
		}

		&_img {
			width: 34rpx;
			height: 34rpx;
		}
	}

	.item_is {
		width: 120rpx;
	}

	.blockGener {
		width: 700rpx;
		// height: 600rpx;

		&_title {
			font-size: 36rpx;
			padding-top: 30rpx;
			text-align: center;
			font-weight: 500;
			margin-bottom: 20rpx;
		}

		&_item {
			padding: 20rpx 40rpx;
			margin-top: 10rpx;

			&_left {
				width: 210rpx;
			}

			&_right {
				border: 1rpx solid #CCCCCC;
				flex: 1;
				border-radius: 8rpx;
			}
		}
	}

	.txt::before {
		content: '*';
		color: #FF0000;
	}

	/deep/.u-textarea__field {
		min-height: 200rpx !important;
	}

	/deep/.uni-input-input {
		font-size: 24rpx;
	}

	// .iconlist{
	// 	position: absolute;
	// }
	// /deep/.u-icon {
	// 	position: absolute;
	// 	right: 10rpx;
	// 	top: 110rpx;
	// }
	/deep/.uicon-trash {
		font-size: 32rpx !important;
	}
</style>